<template>
  <div align="center" style="margin-top: 200px">
        <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span style="size: 50px;color: #2b4b6b">登录</span>
        </div>
        <table>
          <tr>
            <td>用户名</td>
            <td>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
              <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
              <!-- @keydown.enter.native="doLogin"当按下enter键的时候也会执行doLogin方法-->
            </td>
          </tr>
          <tr>
            <td>身份</td>
            <td>
              <el-radio v-model="user.type" label="1">学生</el-radio>
              <el-radio v-model="user.type" label="2">管理员</el-radio>
            </td>
          </tr>
          <tr>
            <!-- 占两行-->
            <td colspan="2">
              <!--<el-button style="width: 300px" type="primary" v-on:click="doLogin">登录</el-button>-->
              <el-button style="width: 150px" type="primary" @click="doLogin(user.type)">登录</el-button>
              <el-button style="width: 150px" type="primary" @click="register()">注册</el-button>
            </td>
          </tr>
        </table>
      </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: {
        username: '',
        password: '',
        type: '1'
      },
    }
  },
  methods: {
    doLogin(type) { // 一点击登录按钮，这个方法就会执行
      // alert(JSON.stringify(this.user))//可以直接把this.user对象传给后端进行校验用户名和密码
      const _this = this;
      let api = ''
      if (type == 1) {
         api = 'http://localhost:8152/api/auth/Student_login';
      } else {
          api = 'http://localhost:8152/api/auth/Manager_login';
      }
      this.axios.post(api,{..._this.user}).then(res=> {
        console.log(res.data.msg);
        if(res.data.msg == "登录成功") {
          //console.log(data.user.type)
          this.$message("登录成功")
          if(type == 1) {
            _this.$router.push("/find")
          } else {
            _this.$router.push('/managerPage')
          }
        } else if (res.data.code == "422"){
          this.$message("用户名或密码错误")
        }
        else
        {
          this.$message("用户名或密码错误")
        }
      })
      // if(type == 1){
      //   ulr = "http://localhost:8080/student/login";
      // }else {
      //   ulr ="http://localhost:8080/manager/login"
      // }
    //   if( type==1)
    //   {
    //     _this.$router.push({
    //       path:'/CourseList',
    //       query:{
    //         sname:this.user.username,
    //       }
    //     })
    //   }
    //   this.axios.post(ulr, this.user).then(res=>{
    //     //后台定义 返回数据 ok == 登录成功 no == 登录失败
    //     if (res.data.msg == "登录成功") {
    //       this.$message('恭喜你登录成功！');
    //       if(type==1){
    //         _this.$router.push({
    //           path:'/CourseList',
    //           query:{
    //             sname:this.user.sname,
    //           }
    //         })
    //       }else{
    //         _this.$router.push('/ManagerPage')
    //       }
    //     } else {
    //       this.$message.error(res.data.msg );
    //     }
    //   })
     },
        register() {
        this.$router.push('/register')
      }
    }
}
</script>

<style>
  .login_container {
    background-color: #2b4b6b;
    height: 100%;
  }
    .login_box {
      width: 500px;
      height: 400px;
      background-color: #fff;
      border-radius: 3px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
</style>
